<template>
    <div class="novel">
        <navbar></navbar>
        <div class="chapterInfo">
            <div class="chapterImg">
                <img :src="novelInfo.img" v-if="novelInfo.img">
            </div>
            <div class="info">
                <h2>{{novelInfo.name}}</h2>
                <span>作者:{{novelInfo.author}}</span>
                <p>简介:{{novelInfo.description}}</p>
                <p>章节数:{{novelInfo.chapter_count}}</p>
            </div>
            <div>
                <p @click="likeClick" :class="{activeColor:likeActive}">
                    <span class="iconfont icon-shoucang"></span>
                    <span>点赞</span>
                </p>
                <p @click="collectionClick" :class="{activeColor:collectionActive}">
                    <span class="icon-star-full"></span>
                    <span>收藏</span>
                </p>
                <p @click="subscriptClick" :class="{activeColor:subscritionActive}">
                    <span class="icon-bubble"></span>
                    <span>关注</span>
                </p>
                <p>
                    <span class="icon-redo2"></span>
                    <span>分享</span>
                </p>
            </div>
        </div>
        <van-collapse v-model="activeNames">
            <van-collapse-item title="开始阅读" name="2">
                <van-list
                        v-model="chapters.loading"
                        :finished="chapters.finished"
                        :immediate-check="false"
                        finished-text="我也是有底线的"
                        @load="onload"
                >
                    <div class="chapterParent">
                        <div v-for="(chapter, index) in chapters.list">
                            <a style="width: 100%" :href="chapter.chapter_href"
                               :key="index">
                                <van-button class="chapter" plain hairline type="info">{{chapter.name}}</van-button>
                            </a>
                        </div>
                    </div>
                </van-list>

            </van-collapse-item>

        </van-collapse>

        <van-divider
                :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        >
            为您推荐
        </van-divider>
        <div class="coverParent">
            <itemCover :nowGenre_Item="item" v-for="(item,index) in recommends"
                       :key="index" class="cover" v-if=recommends></itemCover>

        </div>
    </div>

</template>

<script>
    import navbar from "@/components/common/navbar";
    import itemCover from "@/components/common/itemCover";

    export default {
        name: "novelShow",
        components: {navbar, itemCover},
        data() {
            return {
                activeNames: ['1'],
                chapters: {
                    list: [],
                    page: 1,
                    loading: true,
                    finished: false,
                    pagesize: 100
                },
                collectionActive: null,
                subscritionActive: null,
                likeActive: null,
                recommends: [],
                collect: {
                    id: null,
                    uuid: "",
                    name: "",
                    userId: "",
                    item_name: "",
                    itemName: "",
                    img: "",
                    item_id: "",
                    is_like: null,
                    is_collet: null,
                    time: null,
                    timer: 0,
                    genre: ""
                },
                isMove: true,
                novelInfo: []
            }
        },
        mounted: async function () {
            this.init()
        },
        methods: {
            init() {
                window.addEventListener("touchstart", (event) => {
                    this.isMove = true;
                })
                const user = JSON.parse(localStorage.getItem("user"))
                setInterval(this.isScroll, 10000)
                this.novelInfo = JSON.parse(this.$route.query.item)
                this.collect.item_name = this.novelInfo.name
                this.collect.itemName = this.novelInfo.name
                if (!this.novelInfo.genre) {
                    this.novelInfo.genre = this.novelInfo.category
                }
                this.collect.genre = this.novelInfo.genre
                this.collect.name = localStorage.getItem("name")
                this.collect.userId = user.id;
                this.collect.img = this.novelInfo.img
                this.loadChapter()
                this.getCollect();
                this.$http2.get("/novel/recommend", {params: {name: this.novelInfo.name}}).then((res) => {
                    this.recommends = res.data
                })
            },
            collectionClick() {
                this.collect.is_collect = !this.collectionActive
                this.$http.post("/collect/insert", this.collect).then((res) => {
                    if (res.data.code == 0) {
                        this.collectionActive = !this.collectionActive
                    }
                })

            },
            async loadChapter() {
                const res = await this.$http.get("/novel/chapter", {
                    params: {
                        name: this.novelInfo.name, start: this.chapters.page,
                        size: this.chapters.pagesize
                    }
                })
                this.chapters.list.push(...res.data.data.list)
                this.chapters.loading = false;
                if (res.data.data.list.length < this.chapters.pagesize) {
                    this.chapters.finished = true;
                }
            },
            onload() {
                setTimeout(() => {
                    this.chapters.page += 1;
                    this.loadChapter()
                }, 1000)
            },
            likeClick() {
                this.collect.is_like = !this.likeActive
                this.$http.post("/collect/insert", this.collect).then((res) => {
                    if (res.data.code == 0) {
                        this.likeActive = this.collect.is_like
                    }
                })
            },
            subscriptClick() {
            },

            getCollect() {
                this.$http.get("/collect/getItemHistory", {params: {item_name: this.novelInfo.name}}).then((res) => {
                    const id = res.data.data
                    if (id) {
                        this.collect.id = id.id
                    }
                })
                this.$http.post("/collect/get", this.collect).then((res) => {
                    if (res.data.data.length > 0 && res.data.code == 0) {
                        this.collectionActive = res.data.data[0].is_collect;
                        this.collect.is_collet = res.data.data[0].is_collect;
                        this.likeActive = res.data.data[0].is_like;
                        this.collect.is_like = res.data.data[0].is_like;
                    }
                })
            },
            isScroll: function () {
                if (this.isMove) {
                    this.collect.timer += 10;
                    console.log(this.collect.timer)
                    this.isMove = false
                }
            },
        },
        watch: {
            '$route': function (to, from) {
                this.init()
            }
        },
        destroyed: function () {
            this.$http.post("/collect/createHistory", this.collect)
        }
    }
</script>

<style lang="less" scoped>
    .novel {
        background-color: white;

        .chapterParent {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: baseline;
            /*height: 300px;*/
            overflow: scroll;

            > div {
                width: 30%;
                margin: 1.39vw 0;
            }
        }

        .coverParent {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

            .cover {
                width: 45%;
                margin: 1.39vw 0;
            }
        }

        .chapterInfo {
            margin-left: 5px;

            .chapterImg {
                margin-top: 20px;

                img {
                    margin: 10px 0 0 10px;
                }
            }

            .info {
                color: #999999;
                margin-left: 10px;

                p {
                    margin-top: 5px;
                }
            }

            div:nth-child(3) {
                padding: 0 2.778vw;
                display: flex;
                margin: 20px 0 20px 0;

                p {
                    margin-right: 2.78vw;
                    display: flex;
                    align-items: center;
                    color: #757575;

                    span:nth-child(1) {
                        margin-right: 0.83vw;
                        font-size: 5.83vw;
                    }

                    span:nth-child(2) {
                        font-size: 3.61vw;
                    }
                }

                .activeColor {
                    color: #fb7299;
                }
            }


        }
    }

</style>